/**
 * Created by Administrator on 2016/10/11.
 */
$(function(){
    var box=$("#box ul");
    var oLi=$("#box ul li");
    var btn=$("#button a");
    var num=0;

    box.html+=box.html();
    box.css({"width":oLi.length*oLi[0].offsetWidth});
    var width=box.innerWidth();
    var imgWidth=oLi[0].offsetWidth;

    $(window).resize(function(){
        width=box.innerWidth();
    });
    console.log(imgWidth);
    var index=0;
    var timer=setInterval(autoRun,3000);
    box.mouseenter(function(){
        //alert(1);
        clearInterval(timer);
    });
    btn.mouseenter(function(){
        var index=$(this).index();

        clearInterval(timer);
        slider(index);
    });
    box.mouseleave(function(){
        timer=setInterval(autoRun,3000);
    });

    function autoRun(){

        //document.title=num;
        if(num==3)
        {
            //alert(1);
            num=0;//当图片移动到来末尾重复的图片时，让left等与0
            /* if(index==0)
             {
             box.css({"left":"-imgWidth"});
             index=1;//当图片移动到第一个重复的图片时，让left等于-1200
             }*/
        }

        btn.css({"background":"none"});
        btn.eq(num).css({"background":"red"});
        box.css("left",imgWidth*num*(-1)+"px");
        num++;
    }
    function slider(tmp){
        //oLi.removeClass();

        $(window).resize(function(){
            width=box.innerWidth();
        });
        num=tmp;
        //document.title=num;
        autoRun();

    }



    /*******************************以下是当页面切换时，停止或开始轮播计时器**************************************/
    window.onblur = blurMe;
    window.onfocus = focusMe;

    function blurMe() {
        clearInterval(timer);
    }
    function focusMe() {
        timer=setInterval(autoRun,3000);
    }

});